<template>
  <div class="radio-rank">
    <div class="box" v-for="(item,index) of item"
         :key="index" @click="itemClick(index)">
      <div class="top">
        <slot name="rank"><p></p></slot>
        <img :src="item.picUrl" alt="">
      </div>
      <div class="bottom">
        <p class="bottom-name">{{item.name}}</p>
        <p class="bottom-singer">{{item.singer}}</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "RadioRankStyle2",
        props:{
            item:{
                type:Array,
                default(){
                    return[]
                }
            }
        },
        data(){
            return{

            }
        },
        methods:{
            itemClick(index){
                console.log(this.item[index].id)
            }
        },
        created() {

        }
    }
</script>

<style scoped>
  .radio-rank{
    width: 70px;
  }

  .box{
    width: 70px;
  }

  .top{
    width: 70px;
  }

  .top img{
    border-radius: 8px;
    width: 70px;
    height: 70px;
  }

  .bottom{
    text-align: center;
    font-size: 12px;
  }

  .bottom-name{
    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 1; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }

  .bottom-singer{
    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 1; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }
</style>